<style scoped lang="scss">
  .SingleUpload-wrap {
    .upload-title{
      text-align: center;
      color: #666;
      padding: .2rem 0;
    }
    .upload-box{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .2rem 0;
      background-color: #fff;
      .preview{
        width: auto;
        height: 2.4rem;
        max-width: 100%;
      }
    }
  }
</style>
<template>
  <div class="SingleUpload-wrap">
    <div class="upload-title">{{title}}</div>
    <div class="upload-box" :style="`pointer-events: ${readonly ? 'none' : 'default'}`">
      <van-uploader
          :after-read="afterRead"
          :max-size="maxSize * 1024 * 1024"
          @oversize="onOversize"
      >
        <img class="preview" :src="image" v-if="!!image">
      </van-uploader>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SingleUpload',
    components: {},
    props: {
      title: {
        type: String,
        default: '请上传'
      },
      image: {
        type: String,
        default: null
      },
      maxSize: {
        type: Number,
        default: 2
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    computed: {

    },
    methods: {
      afterRead(file) {
        this.$emit('update:image', file.content)
        this.$emit('handle-file', file)
      },
      onOversize() {
        this.$toast(`文件大小不能超过${this.maxSize}M`);
      }
    },

    watch: {}
  }
</script>
